<template>
	<view class="myinfo">
		<!-- <view class="touxian" v-if="dels">
			<image :src="userUrl" mode="scaleToFill" style="width: 150rpx; height: 150rpx;"></image>
			<view>
				<image src="/static/image/qita/touxiang.png" mode="scaleToFill" style="width: 28rpx; height: 24rpx;"></image>
			</view>
		</view> -->

		<view class="info">
			<view class="name">
				<text>姓名</text><input type="text" placeholder="姓名" v-model="list.name" @focus="nametxt" :disabled="disableds" />
			</view>
			<view class="gender">
				<text>性别</text>
				<view class="nam" @click="selectnam">
					<text :class="list.gender == 1 ? 'selectGender': ''"></text>
					<text>男</text>
				</view>
				<view class="nv" @click="selectnv">
					<text :class="list.gender == 2 ? 'selectGender': ''"></text>
					<text>女</text>
				</view>
			</view>

			<view class="birth">
				<text @tap="show">年龄</text>
				<input type="text" placeholder="年龄" v-model="list.birth" @focus="birthtxt" :disabled="disableds" />
				<!-- <e-picker-plus ref="picker" @confirm="confirm" /> -->
			</view>
			<view class="tel">
				<text>手机号</text><input placeholder="请输入手机号" type="text" :value="tels" @focus="teltxt" @blur="teltxt2" disabled />
			</view>
		</view>

		<view class="del" @click="del" v-if="dels">
			<text>编辑</text>
		</view>
		<view class="quxiaobianji" v-if="quxiaobianji">
			<text @click="cancel" :class="auditsindex == 1 ? 'selectStatus': ''">取消编辑</text>
			<text @click="editsComplete" :class="auditsindex == 0 ? 'selectStatus': ''">编辑完成</text>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			this.getPersonalInformation();
			this.tels = this.$store.state.tel;
			let openids = this.$store.state.userinfo.openid;
			console.log(this.tels);
		},
		data() {
			return {
				disableds: true,
				userUrl: null,
				dels: true,
				quxiaobianji: false,
				auditsindex: 0,
				list: {
					name: "张三",
					gender: 0,
					birth: "1980.9.01",
					tel: "15565657878"
				},
				tels: null
			};
		},
		methods: {
			show() {
				if (!this.disableds) {
					this.$refs.picker.show();
				};
			},
			confirm(e) {
				this.list.birth = e.detail.value;
				console.log(e.detail.resultWord.toString());
				console.log(e.detail)
			},
			del() {
				this.dels = false;
				this.quxiaobianji = true;
				this.disableds = false;
			},
			cancel() {
				this.dels = true;
				this.quxiaobianji = false;
				this.disableds = true;
			},
			async editsComplete() {
				if (this.list.name == "" || this.list.birth == null) {
					uni.showToast({
						title: "姓名必填",
						icon: "none"
					})
					return false;
				}
				if (this.list.gender == "" || this.list.birth == null) {
					uni.showToast({
						title: "性别必填",
						icon: "none"
					})
					return false;
				};
				if (this.list.birth == "" || this.list.birth == null) {
					uni.showToast({
						title: "年龄必填",
						icon: "none"
					})
					return false;
				};

				console.log(this.list.birth);
				if (isNaN(this.list.birth)) {
					uni.showToast({
						title: "年龄必须为数字",
						icon: "none"
					})
					return false;
				};

				if (this.list.birth <= 0 || this.list.birth >= 100) {
					uni.showToast({
						title: "年龄在0-100岁",
						icon: "none"
					})
					return false;
				};

				this.auditsindex = 1;
				let openids = this.$store.state.userinfo.openid;
				let tel = this.$store.state.tel;
				
				let res = await this.$myrequest({
					url: `Pagelist/editUser`,
					method: "POST",
					data: {
						"openid": openids,
						"name": this.list.name,
						"sex": this.list.gender,
						"user_age": this.list.birth,
						"phone": tel
					}
				});

				this.$store.commit("storePersonalInformation", res.data.data);
				uni.switchTab({
					url: "../tab/my/my"
				})
			},
			async getPersonalInformation() {
				let openids = this.$store.state.userinfo.openid;
				let res = await this.$myrequest({
					url: `Pagelist/editMessage?openid=${openids}`
				});
				this.list.name = res.data.data.user_name;
				this.list.gender = res.data.data.user_sex;
				this.list.tel = res.data.data.user_phone;
				this.list.birth = res.data.data.user_age;
				this.userUrl = this.$store.state.userinfo.avatar_url;
			},

			nametxt() {
				this.list.name = "";
			},
			birthtxt() {
				this.list.birth = "";
			},
			teltxt() {
				this.list.tel = "";
			},
			teltxt2() {
				// 手机号不为空且错误。弹出提示
				if (this.list.tel && !(/^1[3456789]\d{9}$/.test(this.list.tel))) {
					uni.showToast({
						title: "手机号输入错误"
					});
				}
			},
			// 修改性别
			selectnam() {
				if (!this.disableds) {
					this.list.gender = 1;
				}
			},
			selectnv() {
				if (!this.disableds) {
					this.list.gender = 2;
				}
			},

		}
	}
</script>

<style lang="scss">
	.myinfo {
		width: 750rpx;
		height: 100%;
		overflow-x: hidden;

		.touxian {
			margin: 40rpx auto;
			text-align: center;
			position: relative;

			>image {
				border-radius: 50%;
			}

			view {
				width: 40rpx;
				height: 40rpx;
				background-color: #FFFFFF;
				@include shuipingchuijuzhong;
				border-radius: 50%;
				position: absolute;
				top: 110rpx;
				left: 53%;
			}
		}
	}

	.info {
		padding: 0 32rpx;

		>view {
			height: 100rpx;
			line-height: 100rpx;
			display: flex;

			&:not(:last-of-type) {
				border-bottom: 2rpx solid #D8D8D8;
			}

			>text {
				margin-right: 30rpx;
				@include textFont;
				color: rgba(0, 0, 0, 1);
			}

			input {
				display: inline-block;
				height: 100%;
				color: #B3B3B3;
			}
		}
	}

	.del {
		@include dibuanniu;
		width: 700rpx;
	}

	.quxiaobianji {
		@include dibusuananniu;
		bottom: 50rpx;
	}

	.selectStatus {
		color: #FFFFFF !important;
		background: linear-gradient(90deg, rgba(96, 232, 205, 1), rgba(45, 209, 188, 1)) !important;
	}

	.selectGender {
		background-color: #2DD1BC !important;
		border: 2rpx solid #2DD1BC !important;
	}

	.nam,
	.nv {
		@include chuizhilianduan;
		width: 70rpx;

		>text {
			display: inline-block;

			&:first-of-type {
				width: 18rpx;
				height: 18rpx;
				border: 2rpx solid rgba(128, 128, 128, 1);
				border-radius: 50%;
			}
		}
	}

	.nv {
		margin-left: 30rpx;
	}
</style>
